<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    h2{
      font-size: 20px;
      background: red;
      line-height: 30px;
      color: white;
    }
    body{
      /* body值默认magin为8px的外边距 */
      margin: 0;
      padding: 0;
      text-decoration: none;
    }
    #box{
      /*  border:粗细 样式 颜色 */
      width: 300px;
      border: 1px solid red;
      margin: 10px auto;
      border-radius: 5px 0;

    }
    form{
      background: #b3d4fc;
    }
    div:nth-child(1)>input{
      border: 3px solid black;
    }
  </style>
</head>
<body>
   <!--
    盒子模型   margin:外边框
             padding: 内边框
             boder:边框
    盒子计算方式：  margin + boder + padding + 内容宽度
    圆角边框/* 左上 右上 右下 左下 （顺时针） */


   -->

<div id="box">
  <h2>会员登陆</h2>
  <form action="#">
       <div>
         <span>用户名：</span>
         <input type="text" size="20" />
       </div>
        <div>
          <span>密码：</span>
          <input type="password"  size="20"/>
        </div>
        <div>
          <span>邮箱：</span>
          <input type="email"  size="20"/>
        </div>
  </form>
</div>

</body>
</html>
